<div id="notesHomePage" class="container-fluid">
  <div class="row">
    <div id="notetitles" class="col-12 btn-group-vertical" role="group">
      {{#each notelist}}
      <a id="{{key}}" class="btn btn-lg btn-block btn-outline-dark" 
          href="/notes/view?key={{ key }}">
        {{ title }}
      </a>
      {{/each}}
    </div>
  </div>
</div>

{{> footerjs}}

{{#if enableSocketio}}
<script src="/socket.io/socket.io.js"></script> 
<script> 
$(document).ready(function () { 
  console.log('socket.io starting');
  var socket = io('/home'); 
  socket.on('notetitles', function(data) { 
    var notelist = data.notelist; 
    console.log(`notetitles ${JSON.stringify(notelist)}`);
    $('#notetitles').empty(); 
    for (var i = 0; i < notelist.length; i++) { 
      notedata = notelist[i]; 
      console.log(`Adding Note Title ${JSON.stringify(notedata)}`);
      $('#notetitles') 
      .append('<a class="btn btn-lg btn-block btn-outline-dark" href="/notes/view?key='+ 
                notedata.key +'">'+ notedata.title +'</a>'); 
    } 
  }); 
}); 
</script>
{{/if}}